<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SIM卡管理</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/systemManage.css">
    <link rel="stylesheet" href="css/bombs.css">
</head>
<body>
    <div class="container">
        <!-- 面包屑 -->
        <div class="top">
            <div class="top-title fl">
                <div>SIM卡管理</div>
            </div>
            <ul class="top-list fr">
                <li class="active"><a href="SIMcard.html">SIM卡列表</a></li>
                <li><a href="#">分析报表</a></li>

            </ul>
        </div>

        <!-- 筛选查询 -->
        <div class="filter-box">
            <div class="filter-top">
                <ul class="filter-top-list">
                    <li class="fl">
                        <input type="text" placeholder="请输入控制器/设备编号">
                    </li>
                    <li class="fl">
                        <input type="text" placeholder="请输入客户名称">
                    </li>

                    <li class="fl dataTime">
                        <input class="laydate-icon" value="2017-4-20" onclick="laydate()">
                    </li>
                    <span class="fl fenge">-</span>
                    <li class="fl dataTime">
                        <input class="laydate-icon" value="2017-4-20" onclick="laydate()">
                    </li>
                    <li class="fl seachBtn">
                        <a type="button">查询</a>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>

        </div>


        <!-- 操作栏（新增、删除按钮） -->
        <div class="handle-box">
            <div class="handle-box-left fl">
                <ul>
                    <li class="add-btn">
                        <span class="handle-icon"></span>
                        新增
                    </li>
                    <li class="edit-btn">
                        <span class="handle-icon"></span>
                        编辑
                    </li>
                    <li class="del-btn">
                        <span class="handle-icon"></span>
                        删除
                    </li>

                </ul>
            </div>

            <div class="handle-box-right fr">
                <!--上一页、下一页-->
                <div class="page-change fl">
                    <a class="pre"></a>
                    <span class="page-num">
                         <b class="orange">1</b>/<b>100</b>
                     </span>
                    <a class="next"></a>
                </div>
            </div>
        </div>


        <!-- SIM卡表格 -->
        <div class="table-box">
            <div class="table SIMcard-table">
                <div class="table-header">
                    <div class="table-td width50">
                        <input type="checkbox" id="chooseAll">
                    </div>
                    <div class="table-td width160">
                        <span>卡号</span>
                    </div>
                    <div class="table-td width120">
                        <span>控制器编号</span>
                    </div>
                    <div class="table-td width80">
                        <span>套餐流量</span>
                    </div>
                    <div class="table-td width80">
                        <span>剩余流量</span>
                    </div>
                    <div class="table-td width120">
                        <span>设备编号</span>
                    </div>
                    <div class="table-td width250">
                        <span>客户名称</span>
                    </div>
                    <div class="table-td width89">
                        <span>套餐价格</span>
                    </div>
                    <div class="table-td width89">
                        <span>累计充值</span>
                    </div>
                    <div class="table-td width160">
                        <span>激活日期</span>
                        <div class="arr-box">
                            <span class="arrUp"></span>
                            <span class="arrDown"></span>
                        </div>
                    </div>

                </div>

                <ul class="table-body">
                    <li>
                        <div class="table-td width50">
                            <input type="checkbox" name="chooseRow">
                        </div>
                        <div class="table-td width160">460040123421905</div>
                        <div class="table-td width120">BD105662</div>
                        <div class="table-td width80">20M</div>
                        <div class="table-td width80">10M</div>
                        <div class="table-td width120">LG17046004</div>
                        <div class="table-td width250">广东伊莱特电器有限公司（发热管厂）(顺1）</div>
                        <div class="table-td width89">50</div>
                        <div class="table-td width89">150</div>
                        <div class="table-td width160">2017-04-10</div>
                    </li>
                    <li>
                        <div class="table-td width50">
                            <input type="checkbox" name="chooseRow">
                        </div>
                        <div class="table-td width160">460040123421905</div>
                        <div class="table-td width120">BD105662</div>
                        <div class="table-td width80">20M</div>
                        <div class="table-td width80">10M</div>
                        <div class="table-td width120">LG17046004</div>
                        <div class="table-td width250">广东伊莱特电器有限公司（发热管厂）(顺1）</div>
                        <div class="table-td width89">50</div>
                        <div class="table-td width89">150</div>
                        <div class="table-td width160">2017-04-10</div>
                    </li>
                    <li>
                        <div class="table-td width50">
                            <input type="checkbox" name="chooseRow">
                        </div>
                        <div class="table-td width160">460040123421905</div>
                        <div class="table-td width120">BD105662</div>
                        <div class="table-td width80">20M</div>
                        <div class="table-td width80">10M</div>
                        <div class="table-td width120">LG17046004</div>
                        <div class="table-td width250">广东伊莱特电器有限公司（发热管厂）(顺1）</div>
                        <div class="table-td width89">50</div>
                        <div class="table-td width89">150</div>
                        <div class="table-td width160">2017-04-10</div>
                    </li>
                    <li>
                        <div class="table-td width50">
                            <input type="checkbox" name="chooseRow">
                        </div>
                        <div class="table-td width160">460040123421905</div>
                        <div class="table-td width120">BD105662</div>
                        <div class="table-td width80">20M</div>
                        <div class="table-td width80">10M</div>
                        <div class="table-td width120">LG17046004</div>
                        <div class="table-td width250">广东伊莱特电器有限公司（发热管厂）(顺1）</div>
                        <div class="table-td width89">50</div>
                        <div class="table-td width89">150</div>
                        <div class="table-td width160">2017-04-10</div>
                    </li>
                    <li>
                        <div class="table-td width50">
                            <input type="checkbox" name="chooseRow">
                        </div>
                        <div class="table-td width160">460040123421905</div>
                        <div class="table-td width120">BD105662</div>
                        <div class="table-td width80">20M</div>
                        <div class="table-td width80">10M</div>
                        <div class="table-td width120">LG17046004</div>
                        <div class="table-td width250">广东伊莱特电器有限公司（发热管厂）(顺1）</div>
                        <div class="table-td width89">50</div>
                        <div class="table-td width89">150</div>
                        <div class="table-td width160">2017-04-10</div>
                    </li>
                    <li>
                        <div class="table-td width50">
                            <input type="checkbox" name="chooseRow">
                        </div>
                        <div class="table-td width160">460040123421905</div>
                        <div class="table-td width120">BD105662</div>
                        <div class="table-td width80">20M</div>
                        <div class="table-td width80">10M</div>
                        <div class="table-td width120">LG17046004</div>
                        <div class="table-td width250">广东伊莱特电器有限公司（发热管厂）(顺1）</div>
                        <div class="table-td width89">50</div>
                        <div class="table-td width89">150</div>
                        <div class="table-td width160">2017-04-10</div>
                    </li>
                    <li>
                        <div class="table-td width50">
                            <input type="checkbox" name="chooseRow">
                        </div>
                        <div class="table-td width160">460040123421905</div>
                        <div class="table-td width120">BD105662</div>
                        <div class="table-td width80">20M</div>
                        <div class="table-td width80">10M</div>
                        <div class="table-td width120">LG17046004</div>
                        <div class="table-td width250">广东伊莱特电器有限公司（发热管厂）(顺1）</div>
                        <div class="table-td width89">50</div>
                        <div class="table-td width89">150</div>
                        <div class="table-td width160">2017-04-10</div>
                    </li>
                </ul>
            </div>
        </div>


        <!-- 分页器 -->
        <div class="paging-bg">
            <div class="fl page-msg">
                <ul>
                    <li>总<span class="orange">1342</span>条</li>
                    <li>每页<span class="orange">10</span>条</li>
                    <li>共<span class="orange">135</span>页</li>
                </ul>
            </div>
            <div class="fr" id="pagination"></div>
        </div>


        <!-- 弹框合集 -->
        <div class="bomb-boxs" id="bomb-boxs" style="display: none">
            <!-- 新增弹框 -->
            <div class="bomb addbomb">
                <div class="top">
                    <div class="top-title fl">
                        <div>新增设备</div>
                    </div>
                    <div class="close-btn fr">
                        <a class="close-icon"></a>
                    </div>
                </div>
                <div class="form-con">
                    <form action="post">
                        <div class="form-group">
                            <ul>
                                <li>
                                    <span>*</span>
                                    <label for="">客户：</label>
                                    <input type="text" placeholder="请输入客户名称信息" class="long-input">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li>
                                    <span>*</span>
                                    <label for="">控制器类型：</label>
                                    <select name="" id="">
                                        <option value="">GPRSDTU-300</option>
                                        <option value="">GPRSDTU-300</option>
                                    </select>
                                </li>
                                <li>
                                    <span>*</span>
                                    <label for="">控制器编号：</label>
                                    <input type="text" placeholder="请输入控制器编号">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li>
                                    <label for="">设备型号：</label>
                                    <input type="text" placeholder="请输入设备型号">
                                </li>
                                <li>
                                    <label for="">设备编号：</label>
                                    <input type="text" placeholder="请输入设备编号">
                                </li>
                                <li>
                                    <label for="">设备功率：</label>
                                    <input type="text" placeholder="请输入设备功率">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li>
                                    <label for="">地区：</label>
                                    <input type="text" placeholder="请输入客户所在地区">
                                </li>
                                <li>
                                    <label for="">行业：</label>
                                    <input type="text" placeholder="请输入客户的行业">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <label for="">备注：</label>
                            <input type="text" placeholder="请输入需要备注的信息" class="long-input">
                        </div>
                        <div class="form-group">
                            <ul>
                                <li>
                                    <label for="">创建日期：</label>
                                    <input class="laydate-icon" value="2017-4-20" onclick="laydate()">
                                </li>
                                <li>
                                    <label for="">出厂日期：</label>
                                    <input class="laydate-icon" value="2014-4-20" onclick="laydate()">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group btn-form-group">
                            <a type="button" class="btn btn-submit">确定</a>
                            <a type="button" class="btn btn-quit">取消</a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 编辑弹框 -->
            <div class="bomb editbomb">
                <div class="top">
                    <div class="top-title fl">
                        <div>新增设备</div>
                    </div>
                    <div class="close-btn fr">
                        <a class="close-icon"></a>
                    </div>
                </div>
                <div class="form-con">
                    <form action="post">
                        <div class="form-group">
                            <ul>
                                <li>
                                    <span>*</span>
                                    <label for="">客户：</label>
                                    <input type="text" placeholder="请输入客户名称信息" class="long-input">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li>
                                    <span>*</span>
                                    <label for="">控制器类型：</label>
                                    <select name="" id="">
                                        <option value="">GPRSDTU-300</option>
                                        <option value="">GPRSDTU-300</option>
                                    </select>
                                </li>
                                <li>
                                    <span>*</span>
                                    <label for="">控制器编号：</label>
                                    <input type="text" placeholder="请输入控制器编号">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li>
                                    <label for="">设备型号：</label>
                                    <input type="text" placeholder="请输入设备型号">
                                </li>
                                <li>
                                    <label for="">设备编号：</label>
                                    <input type="text" placeholder="请输入设备编号">
                                </li>
                                <li>
                                    <label for="">设备功率：</label>
                                    <input type="text" placeholder="请输入设备功率">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li>
                                    <label for="">地区：</label>
                                    <input type="text" placeholder="请输入客户所在地区">
                                </li>
                                <li>
                                    <label for="">行业：</label>
                                    <input type="text" placeholder="请输入客户的行业">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <label for="">备注：</label>
                            <input type="text" placeholder="请输入需要备注的信息" class="long-input">
                        </div>
                        <div class="form-group">
                            <ul>
                                <li>
                                    <label for="">创建日期：</label>
                                    <input class="laydate-icon" value="2017-4-20" onclick="laydate()">
                                </li>
                                <li>
                                    <label for="">出厂日期：</label>
                                    <input class="laydate-icon" value="2014-4-20" onclick="laydate()">
                                </li>
                            </ul>
                        </div>
                        <div class="form-group btn-form-group">
                            <a type="button" class="btn btn-submit">确定</a>
                            <a type="button" class="btn btn-quit">取消</a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 删除弹框 -->
            <div class="bomb tipsbomb delbomb">
                <div class="close-btn fr">
                    <a class="close-icon"></a>
                </div>
                <div class="tips-icon">
                    <img src="image/trash.png">
                </div>
                <div class="tips-title">
                    删除
                </div>
                <p class="isConfirm">你是否确认删除？</p>
                <div class="tips-button">确认</div>
            </div>

        </div>

    </div>


    <script src="js/plugin/jquery.js"></script>
    <script src="js/plugin/laydate-v1.1/laydate/laydate.js"></script>
    <script src="js/plugin/laypage-v1.3/laypage/laypage.js"></script>
    <script src="js/pagination.js"></script>
    <script src="js/common.js"></script>
    <script src="js/bombs.js"></script>

    <!--[if lte IE 9]>
    <script src="js/plugin/jquery.placeholder.min.js"></script>
    <script src="js/placeholder.js"></script>
    <![endif]-->
</body>
</html>